<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
		}
		.orderbox {
			padding: 20px;
			background: #fff;
		}
		.ordertop {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
		}
		.ordertop .title {
			border-left: 2px solid red;
			padding-left: 10px;
			height: 20px;
			line-height: 20px;
		}
		.accept {
			border: 1px solid #ccc;
			border-radius: 6px;
			padding: 5px;
		}
		.orderdetail {
			padding: 0 20px;
		}
		.shopname {
			font-size: 26px;
			font-weight: bold;
		}
		.statusname {
			display: flex;
			font-size: 26px;
			font-weight: bold;
			margin-top: 12px;
			align-items: center;
		}
		.orderinfo {
			display: flex;
			font-size: 16px;
			margin-top: 15px;
		}
		.details,.charger {
			width: 33%;
		}
		.status {
			width: 15%;
		}
		.metalstatus {
			width: 18%;
		}
		.item {
			display: flex;
			margin-top: 8px;
		}
		.itemname {
			min-width: 80px;
		}
		.other {
			padding: 20px;
			margin-top: 20px;
			background: #fff;
		}
		.el-tabs__item {
			font-size: 22px;
		}
		.money {
			margin: 20px;
		}
		.addition {
			color: #e6484e;
			border: 1px solid #e6484e;
			padding: 3px;
			margin-left: 20px;
		}
		.stuffone {
			padding: 20px;
			font-size: 16px;
			border-bottom: 1px solid #ccc;
		}
		.stufftwo {
			padding: 20px;
			font-size: 16px;
		}
		.stuffitem {
			margin-top: 16px;
		}
		.stuffitem .itemname {
			margin-left: 20px;
		}
		.leader {
			color:#e6484e;
			border:1px solid #e6484e;
			padding:3px;
			white-spacing: no-wrap;
			line-height: 20px;
			display:block;
			height:26px;
			margin-left: 8px;
		}
		.confirmitem {
			display: flex;
			margin-top: 20px;
			font-size: 18px;
		}
		.confirmcontent {
			margin-left: 30px;
		}
		.adexample {
			display: flex;
			padding-left: 20px;
		}
		.example {
			width: 200px;
			height: 250px;
			margin-left: 20px;
			text-align: center;
		}
		.example img{
			width: 200px;
			height: 200px;
			margin-bottom: 15px;
		}
		.el-dialog .el-input{
			width: 200px;
		}
		.el-dialog .el-form-item {
			display: flex;
			align-items: center;
		}
		.el-dialog .el-form-item__label {
			color: #fff;
		}
		.el-form-item__content {
			display: flex;
			align-items: center;
			color: #fff;
			margin-left: 20px!important;
		}
		.el-dialog .el-input {
			margin-top: 0;
		}
		.leaderinput {
			display:flex;
			align-items: center;
			margin-bottom: 40px;
			margin-left: 100px;
		}
		.el-dialog__header {
			border-bottom: 1px solid #ccc;
		}
		.moneyitem {
			color: #fff;
			display: flex;
			align-items: center;
		}
		.moneyname {
			width: 140px;
		}
		.metalway {
			border: 1px solid #ccc;
			padding: 3px 8px;
		}
		.dilivery {
			margin-top: 10px;
		}
		.changeway {
			color: #409EFF;
			margin-left: 10px;
		}
		.redtag {
			color: red;
			border: 1px solid red;
			padding: 2px 5px;
			margin-left: 8px;
		}
		.el-timeline {
			padding: 23px;
		}
	</style>
</block>
<block name="content">
	<div class="orderbox">
		<div class="ordertop">
			<div class="title">订单/查看详情     <span style="margin-left:20px;">订单号： {$data['order_no']}</span></div>
			<if condition="$data['order_status'] == 3 && $data['worker_order_status']==='0'">
				<el-button type="primary" @click="openAccept">接受任务</el-button>
			</if>
			<if condition="$data['order_status']=='11'">
				<el-button type="primary" @click="giveMoney">报价</el-button>
			</if>
		</div>
		<div class="orderdetail">
			<div class="shopname">店铺：{$data['store_name']}</div>
			<div class="orderinfo">
				<div class="details">
					<div class="item">
						<div class="itemname">活动名称：</div>
						<div class="itemcontent">{$data['activity_name']}</div>
					</div>
					<div class="item">
						<div class="itemname">店长：</div>
						<div class="itemcontent">{$data['manager_name']}</div>
					</div>
					<div class="item">
						<div class="itemname">店长电话：</div>
						<div class="itemcontent">{$data['store_mobile']}</div>
					</div>
					<div class="item">
						<div class="itemname">安装地址：</div>
						<div class="itemcontent">{$data['detail_address']}</div>
					</div>
					<div class="item">
						<div class="itemname">安装时间：</div>
						<div class="itemcontent">{:date('Y-m-d', $data['up_start_time'])}~{:date('Y-m-d', $data['up_end_time'])}</div>
					</div>
					<div class="item">
						<div class="itemname">是否下画：</div>
						<if condition="data['is_down'] eq 1">
							<div class="itemcontent">是（{:format_date($data['down_time'])}）</div>
						<else/>
							<div class="itemcontent">否</div>
						</if>
					</div>
				</div>
				<div class="charger">
					<div class="item">
						<div class="itemname">项目审核员：</div>
						<div class="itemcontent">{$data['audit_name']}（{$data['audit_mobile']}）</div>
					</div>
					<div class="item">
						<div class="itemname">项目负责人：</div>
						<!-- todo 项目负责人 -->
						<div class="itemcontent">???（???）</div>
					</div>
					<div class="item">
						<div class="itemname">项目合伙人：</div>
						<div class="itemcontent">{$data['partner_name']}（{$data['partner_mobile']}）</div>
					</div>
					<div class="item">
						<div class="itemname">上画完成时间：</div>
						<!-- todo 上画完成时间 -->
						<div class="itemcontent">3天4小时</div>
					</div>
				</div>
				<div class="status">
					<div>订单状态：</div>
					<!--<div class="statusname" v-if="is_upper_air == 0">-->
						<!--&lt;!&ndash; <div class="circle" style="width: 10px;height:10px;background: #e6484e;border-radius:50%;margin-right:10px;"></div> &ndash;&gt;-->
						<!--{{ finishorder ? '生产完成' : orderaccepted ? '已接受' : '待接受'}}-->
					<!--</div>-->
					<!--<div class="finishorder" v-if="showfinish == true"><el-button size="small" @click="orderconfirm = true">生产完成</el-button></div>-->
					<!--<div class="statusname" v-if="is_upper_air == 1">-->
						<!--&lt;!&ndash; <div class="circle" style="width: 10px;height:10px;background: #e6484e;border-radius:50%;margin-right:10px;"></div> &ndash;&gt;-->
						<!--待报价-->
					<!--</div>-->
					<div class="statusname">
						<if condition="$data['order_status'] eq '0'">
							待店长下单
						<elseif condition="$data['order_status'] eq '1'"/>
							店长已下单，待审核
						<elseif condition="$data['order_status'] eq '2'"/>
							审核未通过
						<elseif condition="$data['order_status'] eq '3'"/>
							进行中
						<elseif condition="$data['order_status'] eq '4'"/>
							上画待验收
						<elseif condition="$data['order_status'] eq '5'"/>
							上画验收完成
						<elseif condition="data['order_status'] eq '6'"/>
							下画待验收
						<elseif condition="$data['order_status'] eq '7'"/>
							订单完成
						<elseif condition="$data['order_status'] eq '11'"/>
							高空物料待报价
						<elseif condition="$data['order_status'] eq '12'"/>
							高空物料报价待审核
						<elseif condition="$data['order_status'] eq '13'"/>
							高空报价审核失败
						</if>
					</div>
				</div>
				<div class="metalstatus" v-if="orderaccepted == true">
					<div>物料状态：</div>
					<div class="dilivery">
						<span class="metalway">{{metalway}}</span>
						<span class="changeway">修改</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="other">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="物料信息" name="stuff">
				<foreach name="data['ads']" item="ads">
					<if condition="ads['is_upper_air'] eq 1">
						<div class="money">
							<span>合伙人高空作业费用：1000元</span>
							<span style="margin-left:40px;">店铺应付高空作业费用：1000元</span>
						</div>
					</if>
					<if condition="ads">
						<if condition="ads['ads_type'] eq 1">
							<div class="stuffone">
								<div>
									广告位：{$data['ads']['ads_name']}x{$data['ads']['num']}
									<if condition="data['ads']['is_upper_air'] eq 1">
										<span class="addition">高空</span>
									</if>
									<if condition="data['is_down'] eq 1">
										<span class="addition">需下画</span>
									</if>
								</div>

								<foreach name="ads['ads_detail']" item="ads_detail">
									<div class="stuffitem">
										<span class="itemname">{$ads_detail['ads_name']}</span>
										<span class="itemname">效果图：
										<img src="{$ads_detail['activity_image_url']}">
									</span>
										<span class="itemname">尺寸：高{$ads_detail['height']}cmX宽{$ads_detail['width']}cm</span>
										<span class="itemname">材料：{$ads_detail['materiel_name']}</span>
										<span class="itemname">备注：{$ads_detail['remark']}</span>
									</div>
								</foreach>
							</div>
							<else/>
							<div class="stufftwo">
								<div>
									自定义：{$data['ads']['ads_name']}x{$data['ads']['num']}
									<if condition="data['ads']['is_upper_air'] eq 1">
										<span class="addition">高空</span>
									</if>
									<if condition="data['is_down'] eq 1">
										<span class="addition">需下画</span>
									</if>
								</div>
								<foreach name="ads['ads_detail']" item="ads_detail">
									<div class="stuffitem">
										<span class="itemname">{$ads_detail['ads_name']}</span>
										<span class="itemname">效果图：
											<img style="width: 100px; height: 70px" src="{$ads_detail['activity_image_url']}" onclick="window.open('{$ads_detail["activity_image_url"]}')">
										</span>
										<span class="itemname">尺寸：高{$ads_detail['height']}cmX宽{$ads_detail['width']}cm</span>
										<span class="itemname">材料：{$ads_detail['materiel_name']}</span>
										<span class="itemname">备注：{$ads_detail['remark']}</span>
									</div>
								</foreach>
							</div>
						</if>
					</if>
				</foreach>
			</el-tab-pane>
			<!-- todo 订单进度怎么做 -->
			<el-tab-pane label="订单进度" name="order">
				<el-timeline>
					<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" :color="activity.color">
						{{activity.content}}
					</el-timeline-item>
				</el-timeline>
			</el-tab-pane>
			<el-tab-pane label="广告效果" name="advertise">
				<foreach name="data['ads']" item="ads">
					<div class="adexample">
						<div class="example">
							<img src="{:makeImagePath($ads['filepath'])}" alt="">
							<p>
								{$ads['ads_name']}
								<if condition="data['ads']['is_upper_air'] eq 1">
									<span class="addition">高空</span>
								</if>
								<if condition="data['is_down'] eq 1">
									<span class="addition">需下画</span>
								</if>
							</p>
						</div>
					</div>
				</foreach>

			</el-tab-pane>
			<!-- todo 上画效果 -->
			<el-tab-pane label="上画效果">
				<div class="adexample">
					<div class="example">
						<img src="img/logo.png" alt="">
						<p>门头位 <span class="redtag">高空</span><span class="redtag">需下画</span></p>
					</div>
				</div>
			</el-tab-pane>
			<!-- todo 下画效果 -->
			<el-tab-pane label="下画效果">
				<div class="adexample">
					<div class="example">
						<img src="img/logo.png" alt="">
						<p>门头位 <span class="redtag">高空</span><span class="redtag">需下画</span></p>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
	<!-- 接受订单弹层 -->
	<!-- todo 接受订单 -->
	<el-dialog title="接受订单" :visible.sync="acceptOrder" center :show-close="false" width="40%" center>
		<el-form :model="form" label-width="80px">
			<el-form-item label="物料状态">
				<el-select size="small" v-model="workerParam.service_type" placeholder="物料统一配送">
					<el-option label="师傅携带" value="1"></el-option>
					<el-option label="物料统一配送" value="2"></el-option>
					<el-option label="快递配送" value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="快递单号" v-if="workerParam.service_type == '3'">
				<el-input size="small" v-model="workerParam.courier_num" placeholder="输入快递单号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="上画" style="">
					<el-select v-model="workerParam.worker_id" placeholder="请选择">
						<el-option
								v-for="item in workers"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
					<div class="leader" >队长</div>
			</el-form-item>

			<div class="leaderinput">
				<el-select v-model="workerParam.up_worker_id_arr" multiple  placeholder="请选择">
					<el-option
							v-for="item in workers"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
				<div class="leader" >师傅</div>
			</div>

			<el-form-item label="下画" style="">
				<el-select v-model="workerParam.down_worker_id" placeholder="请选择">
					<el-option
							v-for="item in workers"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
				<div class="leader" >队长</div>
			</el-form-item>

			<div class="leaderinput">
				<el-select v-model="workerParam.down_worker_id_arr" multiple  placeholder="请选择">
					<el-option
							v-for="item in workers"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
				<div class="leader" >师傅</div>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="acceptOrder = false">取 消</el-button>
			<el-button type="primary" @click="addWorker">确 定</el-button>
		</div>
	</el-dialog>
	<!--&lt;!&ndash; 订单接受确认 &ndash;&gt;-->
	<!--<el-dialog title="接受订单" :visible.sync="confirmAgain" center :show-close="false" width="40%" center>-->
		<!--<div class="confirmitem">-->
			<!--<div class="confirmname">物料状态： </div>-->
			<!--<div class="confirmcontent">{{workerConfirmParam.region}}</div>-->
		<!--</div>-->
		<!--<div class="confirmitem">-->
			<!--<div class="confirmname">上画人数： </div>-->
			<!--<div class="confirmcontent">-->
				<!--<p>{{form.topnum}}</p>-->
				<!--<p>{{form.topname}}</p>-->
			<!--</div>-->
		<!--</div>-->
		<!--<div class="confirmitem" style="margin-top:40px;">-->
			<!--<div class="confirmname">下画人数： </div>-->
			<!--<div class="confirmcontent">-->
				<!--<p>{{form.lessnum}}</p>-->
				<!--<p>{{form.lessname}}</p>-->
			<!--</div>-->
		<!--</div>-->
		<!--<div slot="footer" class="dialog-footer">-->
			<!--<el-button @click="confirmAgain = false">取 消</el-button>-->
			<!--<el-button type="primary" @click="againConfirm">确 定</el-button>-->
		<!--</div>-->
	<!--</el-dialog>-->
	<!-- 高空报价弹层 -->
	<el-dialog title="高空报价" :visible.sync="moneyDialogVisible" center :show-close="false" width="440px" center>
		<el-form :model="moneyParam" label-width="80px">
			<div class="moneyitem">
				<div class="moneyname">店铺应付高空作业费用 </div>
				<el-form-item style="margin-bottom:5px;">
					<el-input size="small" v-model="moneyParam.upper_fee" placeholder="输入费用" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
			</div>
			<div class="moneyitem">
				<div class="moneyname">合伙人高空作业费用 </div>
				<el-form-item style="margin-bottom:5px;">
					<el-input size="small" v-model="moneyParam.parter_fee" placeholder="输入费用" autocomplete="off">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="upper">确 定</el-button>
			<el-button @click="moneyDialogVisible = false">取 消</el-button>
		</div>
	</el-dialog>
	<!-- 确定生产完成弹层 -->
	<el-dialog title="确定生产完成？" :visible.sync="orderconfirm" center :show-close="false" width="440px" center>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="orderfinished">确 定</el-button>
			<el-button @click="orderconfirm = false">取 消</el-button>
		</div>
	</el-dialog>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    type: "",
                    activeName: "stuff",
                    orderaccepted: false,  // 订单已接受
                    finishorder: false,   // 生产完成
                    showfinish: false,   // 生产完成按钮是否显示
                    orderconfirm: false,  // 确定生产完成弹层
                    form: {
                        region: "物料统一配送",
                        topname: "",
                        topnum: "",
                        lessname: "",
                        lessnum: "",
                    },
					// 报价
                    moneyDialogVisible: false,   // 报价弹层
                    moneyParam: {
                        order_no: "{$data['order_no']}",
                        shopmoney: "",
                        partmoney: ""
                    },
					// 接受任务
                    metalway: "物料统一配送", // 物料配送方式
                    acceptOrder: false,  //接受订单弹层
//                    confirmAgain: false,  // 确认接受
                    workers:[],
                    workerParam:{
                        id: '{$data["id"]}',
                        service_type: '',
					},

                    activities: [
                        {
                            content: '物料下单',
                            timestamp: '2018-04-11 11:00',
                            color: "red"
                        },
                        {
                            content: '订单审核通过',
                            timestamp: '2018-04-13 11:00',
                            color: "red"
                        },
                        {
                            content: '订单已接受',
                            timestamp: '2018-04-15 11:00 11:00',
                            color: "red"
                        },
                        {
                            content: '师傅已到店',
                            timestamp: '2018-04-16 11:00 11:00'
                        },
                        {
                            content: '上画待验收',
                            timestamp: '2018-04-20 11:00 11:00'
                        },]
                }
            },
			created: function(){
				this.getWorkers();
			},
            methods: {
                getWorkers(){
                    var _this = this;
                    $.post(HOME_URL+'/orderAdmin/Worker/getWorkers', {}, function (data) {
                        if(data.status){
                           _this.workers = data.data;
                           console.log(_this.workers);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
				},
                // 报价
                giveMoney() {
                    this.moneyDialogVisible = true
                },
                upper: function () {
                    var _this = this;
                    $.post(HOME_URL+'/orderAdmin/Order/upper_fee', _this.moneyParam, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '报价成功'
                            });
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
				// 接受订单
                addWorker() {
                    var _this = this;
                    $.post(HOME_URL+'/orderAdmin/Order/addWorker', _this.workerParam, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '接受订单成功'
                            });
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
//                againConfirm() {
//                    this.confirmAgain = false
//                    this.orderaccepted = true
//                    this.showfinish = true
//                },


                handleClick(tab, event) {
                    console.log(tab, event);
                },
                openAccept() {
                    this.acceptOrder = true
                },


                orderfinished() {
                    this.orderconfirm = false
                    this.finishorder = true
                    this.showfinish = false
                }
            }
        });
	</script>
</block>